<template>
  <div class="appointment">
    <div class="title">
      <img src="@/assets/lijiyuyue1.png" alt="">
      <span>{{title}}</span>
    </div>
    <div class="input-div">
      <input type="text" v-model="name" placeholder="请输入您的姓名">
    </div>
    <div class="input-div">
      <input type="number" v-model="phone" placeholder="请输入您的手机号">
    </div>
    <div class="input-div">
      <popup-picker :data="list1" value-text-align="left" v-model="date1" placeholder="请选择未来一周内的日期"></popup-picker>
      <img src="@/assets/jiantou.png" class="jiantou" alt="">
    </div>
    <div class="input-div">
      <popup-picker :data="list2" value-text-align="left" v-model="date2" placeholder="请选择当天的预约时间"></popup-picker>
      <img src="@/assets/jiantou.png" class="jiantou" alt="">
    </div>
    <div class="btn" @click="submit">提交</div>
  </div>
</template>

<script>
import { getAfterWeek } from '@/util/date.js'
import { PopupPicker, AlertModule } from 'vux'
import { doorPre, getStoreById } from '@/api/api'
export default {
  components: {
    PopupPicker,
  },
  data () {
    return {
      list1: [],
      date1: [],
      list2: [['10:00', '10:30','11:00', '11:30','12:00', '12:30','13:00', '13:30','14:00', '14:30', '14:30','15:00', '15:30', '16:00']],
      date2: [],
      name: '',
      phone: '',
      title: '',
    }
  },
  created () {
    this.storeId = this.$route.query.storeId
    this.list1.push(getAfterWeek())
    this.getStoreById();
  },
  methods: {    //router({path: './appointComplete'})
    router (path) {
      this.$router.push(path)
    },
    submit() {
      if(!this.name || !this.phone || !this.date1 || !this.date2){
        AlertModule.show({
          title: '温馨提示',
          content: '请填写内容或选择预约时间'
        })
        return;
      }
      let dataJson = {
        name: this.name,
        phone: this.phone,
        door_store_id: this.storeId,
        pre_time: new Date(this.date1[0]+' '+this.date2[0]).getTime()/1000,
        uid: '1'
      }
      doorPre(dataJson).then((res) => {
        console.log(res)
        AlertModule.show({
          title: '温馨提示',
          content: res.data.msg,
          onHide: () => {
            this.router({path: './appointComplete', query: {title: this.title, date: this.date1[0]+' '+this.date2[0], storeId: this.storeId}});
          }
        })
      }).catch((err) => {
        console.log(err)
      })
    },
    getStoreById() {
      getStoreById(this.storeId).then((res) => {
        console.log(res)
        this.title = res.data.info.title
      }).catch((err) => {
        console.dir(err)
      })
    }
  }
}
</script>
<style lang="stylus">
.appointment
  .title
    line-height 5rem
    height 5rem
    background-color #f5f7fa
    padding-left 1.5rem
    font-size 1.5rem
    font-weight 500
    color #999
    img
      width 1.6rem
      display inline-block
      position relative
      top .2rem
      margin-right .3rem
  .input-div
    height 6rem
    line-height 6rem
    margin 0 1.5rem
    border-bottom 1px solid #e5e5e5
    font-size 1.5rem
    position relative
    img
      position absolute
      width .6rem
      top 2.5rem
      right 0
    input
      color #333
      font-size 1.5rem
      line-height 6rem
      height 6rem
      background-color #fff
      width 100%
      outline none
      &::-webkit-input-placeholder
        color #999
  .btn
    background-color #43A047
    color #fff
    line-height 5rem
    height 5rem
    text-align center
    font-size 1.8rem
    font-weight bold
    display block
    margin 0 1rem
    position fixed
    bottom 1rem
    width calc(100% - 2rem)
    border-radius .4rem
</style>